import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Modal, Form, Button } from 'antd'
import PropTypes from 'prop-types'
import FileList from '@components/FileList/Index'
import Text from '@components/Text'

const { Item } = Form

class Index extends Component {
  formRef = React.createRef()

  state = {
    fileList: []
  }

  initData () {
    const { data } = this.props
    const c = this.formRef.current
    if (data.file instanceof Array) {
      data.file = data.file.map(li => {
        li.name = li.original_filename
        return li
      })
      this.setState({ fileList: data.file })
    }
    c.setFieldsValue(data)
  }

  reset () {
    const c = this.formRef.current
    if (c !== null) {
      c.resetFields()
    }
    this.setState({ fileList: [] })
  }

  componentDidUpdate (prev) {
    const { visible, data } = this.props
    const c = this.formRef.current
    if (!prev.visible && visible) {
      if (c !== null && data !== null) {
        this.initData()
      }
    } else if (prev.visible && !visible) {
      this.reset()
    }
  }

  render () {
    const { data, visible, hide } = this.props
    return (
      <Modal title='详情' open={visible} onCancel={hide} footer={<Button onClick={hide}>返回</Button>}>
        <Form ref={this.formRef} labelCol={{ flex: '98px' }}>
          <Item name='id' noStyle><span /></Item>
          <Item label='标题' name='title'>
            <Text />
          </Item>
          <Item label='问题类型' name='type'>
            <Text />
          </Item>
          <Item label='问题描述' name='content'>
            <Text />
          </Item>
          <Item label='状态' name='status'>
            <Text />
          </Item>
          <Item label='常见问题' name='isqa'>
            <Text format={(v) => v ? '是' : '否'} />
          </Item>
          {
            data !== null && data.status === '处理中' && (
              <Item label='处理情况' name='remark'>
                <Text />
              </Item>
            )
          }
          <Item name='file' label='截图上传'>
            <FileList />
          </Item>
          {
            data !== null && ['完成', '暂不处理'].includes(data.status) && (
              <>
                <Item label='解决耗时' name='utime'>
                  <Text format={(v) => `${v}分钟`} />
                </Item>
                <Item label='处理情况' name='remark'>
                  <Text />
                </Item>
                <Item name='response_file' label='处理截图'>
                  <FileList />
                </Item>
              </>
            )
          }
        </Form>
      </Modal>
    )
  }
}

Index.propTypes = {
  data: PropTypes.object,
  visible: PropTypes.bool,
  hide: PropTypes.func
}

Index.defaultProps = {
  data: null,
  visible: false,
  hide: () => {},
  refreshFn: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {
  }
})

export default connect(mapState, mapDispatch)(Index)
